<!--
 * @Author: Mr.Sen
 * @LastEditTime: 2021-01-10 23:39:22
 * @Description: 
 * @Website: https://grimoire.cn
 * @Copyright (c) Mr.Sen All rights reserved.
-->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>用户注册</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="/static/css/login.css" />
</head>

<body>
	<div class="card">
		<div class="main">
			<div class="head">用户注册</div>
			<form action="" method="post" class="input" onsubmit="return false">
				<input type="text" id="username" name="username" value="" class="inputBox" placeholder="邮箱" />
				<input type="password" id="pwd" class="inputBox" placeholder="密码" />
				<input type="password" id="pwd2" class="inputBox" placeholder="确认密码" />
				<button class="submit" onclick="registerPost()">注册</button>
				<div class="help">
					<a href="../forget/" style="font-size: 16px;">忘记密码</a>
					<a href="../login/" style="font-size: 16px;" id="register">登陆</a>
				</div>
			</form>
		</div>

		<div class="pic" style="background-image: url(/static/img/regist.png);"></div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
	<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
	<script type="text/javascript">

		function registerPost() {
			var userName = document.querySelector("#username").value;
			var pwd1 = document.querySelector("#pwd").value;
			var pwd2 = document.querySelector("#pwd2").value;
			// var form3 = document.querySelector("#pwd3");

			if (username == "") {
				layer.msg("请填写用户名");
				return false;
			}
			if (pwd1 == "") {
				layer.msg("请填写密码");
			}
			if (pwd1 != pwd2) {
				layer.msg("两次输入的密码不一致");
				return false;
			}
			if (pwd1.length < 6) {
				layer.msg("密码太短了吧~~");
				return false;
			}

			var data = Qs.stringify({
				"username":userName,
				"password":md5(pwd1),
			});

			axios.interceptors.request.use((config) => {
				config.headers['X-Requested-With'] = 'XMLHttpRequest';
				let regex = /.*csrftoken=([^;.]*).*$/;
				config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
				return config;
			});

			axios.post(
				"/register/",
				data,
			).then((response)=>{
				if (response.data.status == 1) {
					location.href = "/login/?from=register"
				} else {
					layer.msg(response.data.msg);
				}
			}).catch((err)=>{
				layer.msg("好像发生错误了呢~");
			})
			
		}
	</script>
</body>

</html>